<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }

        #marker {
            text-align: center;
            background-color: #652e8092;
            line-height: 50px;
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var { Scene, GaodeMap } = L7;
        const scene = new Scene({
            id: 'map',
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'normal', // 样式URL
                center: [120.19382669582967, 30.258134],
                pitch: 50,
                zoom: 2,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            logoVisible: false
        });
        /*
        1、侧重地理数据的展示
        2、map是作为场景Scene的一个属性
        Scene场景  使用地图来实现地理数据的可视化
         */
        /* L7
        阿里
        高德 --阿里  国内
        国际 mapbox
         */
        const data = [
            {
                lng: 114.30,
                lat: 30.50,
                name: '武汉',
            }, {
                lng: 112.59,
                lat: 28.12,
                name: "长沙"
            }
        ]
        let markerLayer = null;
        scene.on('loaded', () => {
            markerLayer = new L7.MarkerLayer({
                name: "marker"
            });
            for (let i = 0; i < data.length; i++) {
                const element = document.createElement('p');
                element.id = 'marker'
                var { lng, lat, name } = data[i];
                element.innerHTML = name
                const marker = new L7.Marker({
                    element
                })
                    .setLnglat({ lng, lat })
                markerLayer.addMarker(marker)
            }
            scene.addMarkerLayer(markerLayer);
            scene.on("click", () => {
                console.log(markerLayer)
                markerLayer.clear()
                /* 没有办法获取标注图层 */
                // let layer = scene.getLayerByName("marker");
                // console.log(layer)

            })
        });

    </script>
</body>

</html>